<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="ios-only">Back</span>
          </a>
        </div>
        <div class="title">Infinite Scroll</div>
      </div>
    </div>
    <div data-infinite-distance="50" class="page-content infinite-scroll-content" @infinite="loadMore">
      <div class="block-title">Scroll bottom</div>
      <div class="list simple-list">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 6</li>
          <li>Item 7</li>
          <li>Item 8</li>
          <li>Item 9</li>
          <li>Item 10</li>
          <li>Item 11</li>
          <li>Item 12</li>
          <li>Item 13</li>
          <li>Item 14</li>
          <li>Item 15</li>
          <li>Item 16</li>
          <li>Item 17</li>
          <li>Item 18</li>
          <li>Item 19</li>
          <li>Item 20</li>
        </ul>
      </div>
      <div class="preloader infinite-scroll-preloader"></div>
    </div>
  </div>
</template>
<script>
  return {
    data: function () {
      return {
        allowInfinite: true,
        lastItem: 20,
      }
    },
    methods: {
      loadMore: function () {
        var self = this;
        var $ = self.$$;
        if (!self.allowInfinite) return;
        self.allowInfinite = false;

        setTimeout(function () {
          if (self.lastItem >= 200) {
            $(self.$el).find('.preloader').remove();
            return;
          }
          var html = '';

          for (var i = 1; i <= 20; i++) {
            html += '<li>Item ' + (self.lastItem + i) + '</li>';
          }

          $(self.$el).find('.list ul').append(html);

          self.lastItem += 20;

          self.allowInfinite = true;
        }, 1000);
      }
    }
  }
</script>
